<template>
  <div class="bg">

    <!-- <van-swipe-item v-for="(item, index) in banner1" :key="index">
        <van-image class="cover_img" :src="`${resourceURL}${item.pic_url}`" fit="cover" />
      </van-swipe-item> -->
    <van-swipe class="swiperBox" :autoplay="5000" @change='changepage' :show-indicators="false">
      <van-swipe-item v-for="(item,index) in banner1" :key="index">
        <div class="swiperA">
          <div class="swiper" :style="index==pageindex?'transform: scale(1);':'transform: scale(0.9);'">
            <div class="pageimg">
              <img :src="`${resourceURL}${item.pic_url}`" alt="" />
            </div>
            <!-- <van-image width="100" height="100">

            </van-image> -->

          </div>
        </div>
      </van-swipe-item>

    </van-swipe>
    <div class="newGoods">
      <div class="title">

        <van-image :src="require('../../assets/img/home/heart.png')" fit="cover" />

        <p>必买新品</p>
      </div>
      <van-list v-model="loading" :finished="finished" @load="onLoad" :error.sync="err" error-text="加载失败，点击这里重试">
        <div class="goodsBox">
          <div class="goods" v-for="(item,index) in list" :key="index" @click="jump(item)">
            <van-image class="cover_img" :src="`${resourceURL}${item.imageurl}`" fit="cover" />
            <div class="product_name">{{item.product_name}}</div>
            <!-- <div class="price">
              <div class="rows">
                <span class="sprice">￥{{item.mprice }}</span>
                <span class="origin_price">可得{{item.jifen }}积分</span>
              </div> 
               <div class="cart_icon">
          <van-icon :name="require('@/assets/img/carticon.png')" />
        </div> 
            </div> -->
            <div class="btnList">
              <div class="left"><span style="font-size:12px">￥</span> {{item.mprice}}</div>
              <div class="trangle"></div>
              <div class="right">新品价</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>

  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      loading: false,
      finished: true,
      err: false,
      page: 1,
      list: [],
      banner1: [],
      pageindex: 0
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {
    this.productlist()
    this.getSwiper()
  },
  methods: {
    //加载下一页
    onLoad () {
      this.page++
      this.productlist();
    },
    changepage (index) {
      this.pageindex = index;
    },
    // 普通商品列表
    productlist () {
      this.loading = true
      this.$axios.get(this.$api.productlist, {
        params: {
          page: this.page,
          limit: '10',
          show: '2',
          is_page: '2'
        }
      }).then((res) => {
        this.loading = false
        this.searchBtn = false

        if (res.data.code == 1) {
          if (res.data.data.length == 0) {
            this.finished = true
          } else {
            this.list = this.list.concat(res.data.data);
            this.finished = false

          }

        } else {
          this.err = true;
          this.loading = false;
        }


      })
    },
    getSwiper () {

      this.$axios.get(this.$api.newbanner, {
        params: {

        }
      }).then((res) => {
        if (res.data.code == 1) {
          //this.arr.push(res.data.data.data);

          this.banner1 = res.data.data


        }

      })
    },
    jump (item) {

      this.$router.push({
        name: 'product',
        query: {
          id: item.product_id
        }

      })
    },
  }
};
</script>
<style lang='less' scoped>
.bg {
  background: #ff7733;
  min-height: 100vh;
  overflow: auto;
}

.newGoods {
  margin: 12px 16px;
  .title {
    display: flex;
    align-items: center;
    p {
      margin: 0;
      margin-left: 6px;
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
    }

    /deep/.van-image {
      width: 16px;
      height: 14px;
    }
  }
  .goodsBox {
    display: grid;
    grid-template-columns: repeat(2, 175px);
    .goods {
      width: 168px;
      min-height: 247px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 3px 10px 1px rgba(1, 12, 27, 0.06);
      border-radius: 6px 6px 6px 6px;
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .cover_img {
        width: 100%;
        height: 140px;
        border-radius: 10px;
        overflow: hidden;
      }
      .product_name {
        color: #470607;
        font-size: 14px;
        margin: 6px 12px;
        box-sizing: border-box;
        display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
        -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
        -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
        overflow: hidden;
      }
      .btnList {
        width: 144px;
        height: 24px;
        margin: 6px 12px;
        background: rgba(255, 119, 51, 0.3);
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        position: relative;
        .left {
          width: 49%;
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          background: #ff7733;
          text-align: center;
          line-height: 24px;
        }
        .trangle {
          position: absolute;
          left: 48.9%;
          top: 0;
          width: 0;
          height: 0;
          border-color: transparent #ff7733; /*上下颜色 左右颜色*/
          border-width: 0 0 26px 5px;
          border-style: solid;
        }
        .right {
          width: 50%;
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;

          color: #ff7733;
          text-align: center;
          line-height: 24px;
        }
      }
    }
  }
}
.swiperBox {
  margin-top: 10px;
  /deep/ .van-swipe-item {
    display: flex;
    justify-content: center;
  }
  .swiperA {
    width: 90%;
    height: 100%;

    .swiper {
      width: 100%;
      height: 100%;

      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      display: flex;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      .pageimg {
        width: 100%;
        height: 180px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      // .van-image {
      //   border-radius: 10px 10px 10px 10px;
      //   // overflow: hidden;
      // }
      // .right {
      //   width: calc(100% - 120px);
      //   margin-left: 20px;
      //   height: 100%;
      //   .swiperTitle {
      //     font-size: 14px;
      //     color: #303030;
      //     width: 144px;
      //     height: 42px;
      //     text-overflow: -o-ellipsis-lastline;
      //     overflow: hidden; //溢出内容隐藏
      //     text-overflow: ellipsis; //文本溢出部分用省略号表示
      //     display: -webkit-box; //特别显示模式
      //     -webkit-line-clamp: 2; //行数
      //     line-clamp: 2;
      //     -webkit-box-orient: vertical; //盒子中内容竖直排列
      //   }
      //   .price {
      //     text-align: left;
      //     vertical-align: bottom;
      //     margin-top: 4px;
      //     .leftPrice {
      //       font-size: 20px;
      //       color: #fb2b2c;
      //     }
      //     .rightPrice {
      //       font-size: 14px;
      //       color: #b9b9b9;
      //       text-decoration: line-through;
      //     }
      //   }
      //   .btn {
      //     display: flex;
      //     justify-content: flex-end;
      //     margin-top: 11px;
      //     button {
      //       width: 68px;
      //       height: 24px;
      //       background: #b60102;
      //       border-radius: 10px 10px 10px 10px;
      //       font-size: 12px;
      //       color: #ffffff;
      //       padding: 0;
      //     }
      //   }
      // }
    }
  }
}
/deep/ .van-swipe-item {
}
</style>